<template>
  <div>
     <div v-show="flag" class="shegai"></div>
     <div v-show="flag" class="email_Input">
        <p>
          请输入有效的Email地址或手机号码
        </p>
        <p @click="know()">我知道了</p>
      </div>
     <header>
       <a href="/#/index">
         <span class="iconfont icon-iconfont6 h_left"></span>
       </a>
       <h3>
         会员登陆
       </h3>
       <a href="javascript:;" @click="navshow()">
          <span class="iconfont iconfont-sortall icon-iconfontsortall h_right"></span>
       </a>
     </header>
     <div class="nav" v-show="isTrue">
         <ul class="f_ul">
           <li>
             <router-link to="/index"> 
               <img src="../../images/liushuxue/home_icon_new.png" alt="">
               <p>首页</p>
             </router-link>
           </li>
           <li>
             <router-link to="#">
               <img class="aaa" src="../../images/liushuxue/classify_icon_new.png" alt="">
               <p>分类</p>
             </router-link>
           </li>
           <li class="numfather">
             <router-link to="#">
               <img src="../../images/liushuxue/cart_icon_new.png" alt="">
               <span class="num">2</span>
               <p>购物车</p>
             </router-link>
           </li>
           <li>
             <router-link to="#">
               <img src="../../images/liushuxue/my_icon_new.png" alt="">
               <p>我的</p>
             </router-link>
           </li>
         </ul>
     </div>
     <div class="content">
     <form>
       <div class="use_phone_father">
       <a class="use_phone" href="javascript">使用手机验证码登陆</a>
       </div>
      <input class="txt_phone" type="text" placeholder="请输入邮箱/手机号码">
      <input class="txt_pwd" type="text" placeholder="请输入登陆密码">
      <div class="txtlogin">
      <input class="cbx" type="checkbox">一个月内免登录<br>
       </div>
      <input class="txtlogin_in" type="text" value="登陆" @click="show()">
      <div class="fast">
       <div class="f_left">
         <a href="/#/register">
          <span class="register"></span>
          快速注册
         </a>  
       </div>
       <div class="f_right">
        <span class="iconfont icon-mima"></span>
        <a href="javascript:;">找回密码</a>  
       </div>
      </div>
      <a class="otherlogin" href="javascript:;">其他方式登陆</a>
     </form>
     </div>
     <footer>
       <div class="txtqq">
       <img class="img_one" src="../../images/liushuxue/login_qq.png" alt=""><br>
       <span class="qq">QQ</span>
       </div>
       <div class="paymoney">
       <img class="img_two" src="../../images/liushuxue/login_zfb1.png" alt=""><br>
       <span class="pay">支付宝</span>
      </div>
     </footer>
  </div>
</template>

<script>
import './Iconfont/iconfont.css';
 export default {
  data() {
    return {
      flag: false,
      isTrue: false,
    };
  },
  methods: {
    show() {
      this.flag = !this.flag;
    },
    know() {
      this.flag = false;
    },
    navshow() {
      this.isTrue = !this.isTrue;
    }
  },
}; 
</script>
<style lang="css" scoped>
.content {
  padding: 0 8px;
}
h3 {
  margin: 0;
  padding: 0;
}
header {
  height: 44px;
  border-bottom: 1px solid #e4e4e4;
  background-color: #fafafa;
  overflow: hidden;
  position: relative;
}
.h_left {
 float: left;
 padding: 11px 0 0 20px;
 color: #646464;
}
header h3 {
 width: 50%;
 line-height: 44px;
 text-align: center;
 margin: 0 auto;
 font-weight: 400;
 font-size: 18px;
}
.h_right {
 position: absolute;
 top: 11px;
 right: 10px;
 padding: 0 12px 0 0;
 margin-right: 0;
 color: #646464;
 font-size: 18px;
}
.use_phone_father {
  overflow: hidden;
}
.use_phone {
  float: right;
  line-height: 42px;
  color: #ff6600;
  margin-right: 10px;
}
.txt_phone {
  width: 100%;
  height: 42px;
  padding-left: 5px;
  background-color: #F9F9F9;
  border: none;
  border: 1px solid #e2e2e2; 
  outline: 0;
}
.txt_pwd {
  margin-top: 11px;
  width: 100%;
  height: 42px;
  padding-left: 5px;
  background-color: #F9F9F9;
  border: none;
  border: 1px solid #e2e2e2;
  outline: 0;
}
.txtlogin {
  height: 56px;
  padding-top: 32px;
  margin-left: 20px;
}
.cbx {
  margin-right: 10px;
}
.txtlogin_in {
  margin-top: 11px;
  width: 100%;
  height: 38px;
  background-color: #ff6600;
  border: none;
  text-align: center;
  display: block;
}
.fast {
  overflow: hidden;
  padding-top: 25px; 
}
.f_left {
 float: left;
 padding-left: 15px;
}

.f_right {
 float: right;
 padding-right: 15px;
}
.f_left a,
.f_right a {
 color: #666;
}
.otherlogin {
 display: block;
 margin-top: 43px;
 color: #666;
 text-align: center;
}
footer {
  margin-top: 23px;
  margin: 0 auto;
  overflow: hidden;
}
.txtqq {
  float: left;
  text-align: center;
  margin-left: 30%;
  margin-right: 40px;
}
.img_one {
  width: 60px;
  height: 64px;
}
.qq {
 display: inline-block;
 margin-top: 8px;
}
.paymoney {
 float: left;
 text-align: center;
}
.img_two {
  width: 60px;
  height: 64px;
}
.pay {
 display: inline-block;
 margin-top: 8px;
}
.shegai {
  position: absolute;
  background-color: rgba(0,0,0,0.7);
  width: 100%;
  height: 100%;
  z-index: 2;
}
.email_Input {
  width: 90%;
  height: 150px;
  background-color: #fff;
  position: absolute;
  top: 150px;
  margin-left: 25px;
  z-index: 3;
}
.email_Input p:nth-child(1) {
  text-align: center;
  height: 120px;
  padding-top: 55px;
}
.email_Input p:nth-child(2) {
  border-top: 1px solid #D0D0D0;
  text-align: center;
  height: 50px;
  background-color: #F2F2F2;
  padding-top: 10px;
} 
.register {
  color: #858585;
}
/* 首页，分类，购物车 */
.nav {
  padding-top: 6px;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #E4E4E4;
}
.f_ul {
  overflow: hidden;
  margin-bottom: 3px;
}
.f_ul li {
  float: left;
  width: 25%;
}
.f_ul li a {
  text-align: center;
  display: block;
}
.f_ul li a img {
  width: 20px;
  height: 20px;
}
.f_ul li a p {
 margin-top: 3px;
 font-size: 12px;
 color: #494949;
 margin-bottom: 0;
}
.f_ul li a .f_active {
  color: #fe6600;
}
.numfather {
  position: relative;
}
.num {
  position: absolute;
  top: 0;
  right: 28%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #FF6600;
  color: #fff;
  line-height: 13px;
  font-size: 12px;
}
/* 字体图标 */
@font-face {
  font-family: 'icomoon';
  src:  url('./fonts/icomoon.eot?7kkyc2');
  src:  url('./fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('./fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('./fonts/icomoon.woff?7kkyc2') format('woff'),
    url('./fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
.register {
  font-family: "icomoon";
}

</style>

